<template>
  <div class="setdiyactivity">
    <el-row :gutter="10">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <span>主标题:</span>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="grid-content bg-purple-light" style="display:flex;aligin-item:center">
          <el-input size="small" v-model="headline"></el-input>&nbsp;&nbsp;
          <el-checkbox v-model="showTitle">显示</el-checkbox>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <span>展示:</span>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="grid-content bg-purple-light lineCenter">
          <el-radio-group v-model="activityNum" size="small">
            <el-radio-button label="4">4个</el-radio-button>
            <el-radio-button label="2">2个</el-radio-button>
            <el-radio-button label="1">1个</el-radio-button>
          </el-radio-group>
          &nbsp;&nbsp;<span>(一行几个)</span>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <span>标题:</span>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="grid-content bg-purple-light">
          <el-input size="small" v-model="clickTitle"></el-input>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <span>内容:</span>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="grid-content bg-purple-light">
          <el-input size="small" v-model="clickText"></el-input>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <span>跳转:</span>
        </div>
      </el-col>
      <el-col :span="14">
        <div class="grid-content bg-purple-light">
          <el-input size="small" v-model="linkName" disabled></el-input>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple-light">
          <el-button size="small" @click="dialogVisible = true">选择</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" v-if="activityNum == 4">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <span>颜色:</span>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="grid-content bg-purple-light lineCenter">
          <el-color-picker
            v-model="clickColor"
            show-alpha
            :predefine="predefineColors"
            size="small"
          ></el-color-picker>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <span>图片:</span>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="grid-content bg-purple-light lineCenter">
          <div class="Img">
            <img :src="clickUrl" alt />
          </div>
          <img
            src="../../../assets/config_images/addimg.png"
            alt
            class="upImg"
            @click="showImg=true"
          />
        </div>
      </el-col>
    </el-row>
    <pageLink :dialogVisible="dialogVisible" @colse="colsepage" @confirm="confirm"></pageLink>
    <UploadImages @closeModel="closeModel" :dialogVisible="showImg" @changeImg="changeImg"></UploadImages>
  </div>
</template>

<script>
import pageLink from "@/components/linkGroup/pageLink.vue"
import { initialdata } from "../initdata/initialdata";
import UploadImages from "@/components/UploadImages/UploadImages";
import { mapGetters } from "vuex";
export default {
  components: {
    UploadImages,
    pageLink
  },
  computed: {
    ...mapGetters(["activity"]),
    showTitle: {
      get() {
        return this.activity.showTitle;
      },
      set(val) {
        this.activity.showTitle = val;
        this.$store.commit("activity/SET_OBJ", this.activity);
      }
    },
    activityNum: {
      get() {
        return this.activity.activityNum;
      },
      set(val) {
        this.activity.activityNum = val;
        this.$store.commit("activity/SET_OBJ", this.activity);
      }
    },
    headline: {
      get() {
        return this.activity.headline;
      },
      set(val) {
        this.activity.headline = val;
        this.$store.commit("activity/SET_OBJ", this.activity);
      }
    },
    clickTitle: {
      get() {
        return this.activity.clickTitle;
      },
      set(val) {
        this.activity.clickTitle = val;
        this.activity.data[this.activity.clickIndex].title = val;
        this.$store.commit("activity/SET_OBJ", this.activity);
      }
    },
    clickText: {
      get() {
        return this.activity.clickText;
      },
      set(val) {
        this.activity.clickText = val;
        this.activity.data[this.activity.clickIndex].text = val;
        this.$store.commit("activity/SET_OBJ", this.activity);
      }
    },
    clickUrl: {
      get() {
        return this.activity.clickUrl;
      },
      set(val) {
        this.activity.clickUrl = val;
        this.activity.data[this.activity.clickIndex].imgUrl = val;
        this.$store.commit("activity/SET_OBJ", this.activity);
      }
    },
    clickColor: {
      get() {
        return this.activity.clickColor;
      },
      set(val) {
        this.activity.clickColor = val;
        this.activity.data[this.activity.clickIndex].background = val;
        this.$store.commit("activity/SET_OBJ", this.activity);
      }
    },
    linkName: {
      get() {
        console.log(this.activity);
        // 0为false
        return this.activity.data[this.activity.clickIndex].linkName
      },
      set(val) {
        console.log(val)
        this.activity.data[this.activity.clickIndex].linkName = val;
        this.$store.commit("activity/SET_OBJ", this.activity);
      }
    }
  },
  data() {
    return {
      radio3: "4",
      dialogVisible: false,
      initialdata: initialdata,
      num: 1,
      showImg: false,
      addData: [],
      title: "",
      text: "",
      color: "rgba(255, 69, 0, 0.68)",
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577"
      ]
    };
  },
  mounted() {
    this.addData = this.initialdata.activityList.data;
  },
  watch: {
    activity: {
      handler(val) {
        this.update();
      },
      deep: true
    }
  },
  methods: {
    // 确定选中链接
    confirm(val) {
      this.linkName = val.title;
      this.activity.data[this.activity.clickIndex].link = val.link;
      console.log(val)
    },
    colsepage() {
      this.dialogVisible = false;
    },
    update() {
      // 更新vuex里面的PageJSON
      this.$store.dispatch("apply/PageJSONUpData");
      // 更新父组件中的PageJSON
      this.$emit("updataNowPageJSON");
    },
    closeModel() {
      this.showImg = false;
    },
    changeImg(val) {
      console.log(val);
      this.clickUrl = val;
    },
    handleChange(val) {
      var listLength = this.activity.data.length / 4;
      if (val > listLength) {
        // 加
        for (let i = 0; i < val - listLength; i++) {
          this.activity.data = [...this.activity.data, ...this.addData]
        }
      } else if (val < listLength) {
        // 减
        this.activity.data.splice(this.activity.data.length - 5, 4)
      }
      this.$store.commit("activity/SET_OBJ", this.activity);
    }
  }
};
</script>

<style lang="scss" scoped>
.setdiyactivity {
  .grid-content {
    text-align: right;
    min-height: 36px;
  }
  .Img {
    width: 50px;
    height: 50px;
    background: #275b96;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .upImg {
    width: 50px;
    height: 50px;
    margin-left: 15px;
  }
  .lineCenter {
    text-align: left;
    height: 50px;
    display: flex;
    align-items: center;
  }
}
</style>
